<template>
    <div class="group">

        <h2>用户反馈表单</h2>

        <!-- 姓名输入 -->
        <label for="name">姓名：</label>
        <input v-model="feedback.name" id="name" type="text" placeholder="请输入您的姓名" />

        <!-- 反馈类型选择 -->
        <label for="feedback-type">反馈类型：</label>
        <select v-model="feedback.type" id="feedback-type">
            <option value="">请选择反馈类型</option>
            <option value="complaint投诉">投诉</option>
            <option value="suggestion建议">建议</option>
            <option value="other其他">其他</option>
        </select>

        <!-- 反馈详情 -->
        <label for="details">反馈详情：</label>
        <textarea v-model="feedback.char" :maxlength="maxChar" id="details" placeholder="请输入您的反馈内容"></textarea>
        <p>剩余字符：{{ residualChar }}</p>

        <!-- 邮件通知 -->
        <p>是否同意接受邮件通知？</p>
        <label>
            <input type="radio" name="email-notify" v-model="feedback.isAgree" value="yes" /> 是
        </label>
        <label>
            <input type="radio" name="email-notify" v-model="feedback.isAgree" value="no" /> 否
        </label>

        <!-- 提交按钮 -->
        <button @click="showFeedbackDetails">提交反馈</button>


        <!-- 提交结果展示 -->
        <div v-show="isShowModel" @click="closeModel" class="model">
            <div class="model-content" @click.stop>
                <h3>反馈详情</h3>
                <p>姓名：{{ feedbackDetails.name }}</p>
                <p>反馈类型：{{ feedbackDetails.type }}</p>
                <p>反馈内容：{{ feedbackDetails.char }}</p>
                <p>是否同意接收通知：{{ feedbackDetails.isAgree }}</p>
                <button @click="closeModel">关闭模块框</button>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { computed, ref } from 'vue';

interface IInfo {
    name: string
    type: string
    isAgree: string
    char: string
}

// 初始化表单信息
const feedback = ref<IInfo>({
    name: '',
    type: '',
    isAgree: '',
    char: '',
})

// 初始化模块化反馈表单信息
const feedbackDetails = ref<IInfo>({
    name: '',
    type: '',
    isAgree: '',
    char: '',
})

const maxChar = 100

const isShowModel = ref(false)

const residualChar = computed(() => {
    return maxChar - feedback.value.char.length
})

const showFeedbackDetails = () => {
    feedbackDetails.value = feedback.value
    feedback.value = {
        name: '',
        type: '',
        isAgree: '',
        char: '',
    }
    isShowModel.value = true
}

const closeModel = () => {
    isShowModel.value = false
}

</script>

<style lang="scss" scoped>
.group {
    border: 3px solid skyblue;
    margin: 10px;
    padding: 10px;
    margin-bottom: 50px;
}

div {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
select,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    height: 100px;
    resize: none;
}

button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #218838;
}

p {
    margin-top: 0;
}

h3 {
    margin-top: 20px;
}

input[type="radio"] {
    margin-right: 5px;
}

.feedback-result {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
}

.model {
    display: block;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);

    .model-content {
        background-color: #fff;
        margin: 35% auto;
        padding: 20px;
        border-radius: 4px;
        width: 400px;
    }

    p {
        height: 30px;
        line-height: 30px;
    }
}
</style>